<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定位</title>
  <style>
    /* 类选择器 */
    .fl{
      float: left;      
     /* 背景色 */
     background-color: red;
    }
    .f2{float: left;
     background-color: green;
    /* 相对定位 ，一标签原始的位置为参考，left 和top 控制元素的移动
    left 变大，向右移动，top变大向下移动
     */
     position: relative;
     left: 0px;
     top: 0px;
    }
    p{
      width: 200px;height: 200px;
      /* 背景色 */
      background-color: red;
    }
  </style>
</head>
<body>  
  <!-- 定位，可以让元素覆盖,在页面某处固定 后边的元素可以覆盖住前边的元素，
  元素可以在另一个标签内移动，元素在页面内某个位置固定
  定位组成：
  定位 定位模式+偏移 组成
  -->
  <!-- 相对定位
    position: relative; 定位模式（相对定位，绝对定位，固定定位）
    left: 0px; 偏移
    top: 0px;
   -->
  <p class="fl">我是个好老师</p>
  <p class="f2">你们是好学生</p>
</body>
</html>